<template>
  <el-container class="index">
    <el-header><Header /></el-header>
    <el-container>
      <el-aside :style="'background-color:' + $store.state.$vt_a">
        <Aside />
      </el-aside>
      <el-main>
        <NavigationBar />
        <Main />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { Header, Aside, Main, NavigationBar } from "./index.js";
export default {
  components: {
    Header,
    Aside,
    Main,
    NavigationBar,
  },
};
</script>

<style lang="scss" scoped>
$dt_a: #41b883;
$dt_b: #41b8838a;
$dt_c: #41b88300;
$vt_a: #35495e;
$vt_b: #35495e83;
$vt_c: #35495e00;
.index {
  height: 100vh;
  overflow: hidden;
  > .el-header {
    height: 50px !important;
    padding: 0;
  }
  > .el-container {
    overflow: hidden;
    > .el-aside {
      width: auto !important;
    }
    > .el-main {
      // border-top: 1px solid #545c643f;
      padding: 0;
      margin: 0;
      position: relative;
      display: flex;
      flex-flow: column;
      height: 100%;
      // overflow: hidden;
      .Main {
        flex: 1;
        overflow-y: auto;
        > div {
          padding: 15px;
        }
      }
    }
  }
}
</style>
<style>
.el-main .Main > div {
  padding: 15px;
}

.el-main .Main .AsideIcon,
.el-main .Main .el-drawer__wrapper {
  padding: 0;
}
</style>